<template>
  <div>
    <div v-transfer-dom>
      <popup v-model="showNotice" height="100%">
        <div class="showNotice-popup">
          <h3>用户注册协议</h3>
          <p>1、在本站注册的会员，必须遵守《互联网电子公告服务管理规定》等法律规定，不得在本站发布侮辱诽谤他人，侵犯他人隐私，侵犯他人知识产权，政治言论，商业讯息等信息，不得传播病毒。</p>
          <p>2、所有在本站发表的文章，本站都具有最终编辑权，并且保留用于印刷或向第三方发表的权利，如果你的资料不齐全，我们将有权不作任何通知使用你在本站发布的作品。</p>
          <p>3、在登记过程中，你将选择注册名和密码，注册名的选择应遵守法律法规及社会公德。你应当对你的密码保密，否则你须对你注册名的密码下发生的所有活动承担相应的法律责任。</p>
        </div>
        <div class="btn-box" style="margin-top: 30px;">
          <x-button type="primary" @click.native="showNotice=!showNotice">同意</x-button>
          <x-button type="default" plain style="margin-top: 30px;" @click.native="goBack">不同意</x-button>
        </div>
      </popup>
    </div>
    <group  label-margin-right="5px" label-align="left">

      <x-input title='手机号码:' type="tel" :max="11" is-type="china-mobile"
               keyboard="number" ref="phoneNumber" v-model="registerInfo.phoneNumber"
               @on-blur="checkPhoneNumber" required>
      </x-input>
      <x-input title="验证码:" class="weui-cell_vcode" v-model="verCode" required novalidate :icon-type="iconType">
        <img slot="right" class="weui-vcode-img" :src="verCodeData" @click="getverCode" alt="看不清，换一张">
      </x-input>
      <x-input title="手机验证码:" class="weui-vcode" v-model="registerInfo.smsCode">
        <x-button slot="right" type="primary" mini @click.native="SendSMS" :disabled="disabledSend"
                  style="padding-right: 30px;">
          发送验证码

        </x-button>
        <span slot="right" style="position: relative;">
            <countdown v-model="countdownTime" :start="countdownStart" @on-finish="finish"
                       class="countdownTime"></countdown>
          </span>
      </x-input>
      <x-input title='密码:' type="password" v-model="registerInfo.passWord01" @on-blur="checkPassWord01"
               required></x-input>
      <x-input title='确认密码:' type="password" v-model="registerInfo.passWord02" @on-blur="checkPassWord02"
               required></x-input>
    </group>

    <div class="btn-box" style="margin-top: 30px;">
      <x-button type="primary" @click.native="goRegister">注册</x-button>
    </div>
    <div v-transfer-dom>
      <alert v-model="alertShow" title="提示"> {{ alertMessage }}</alert>
    </div>

    <toast v-model="showPositionValue" type="cancel" :text="toastText" width="10em"></toast>
  </div>
</template>
<script type="text/ecmascript-6">
  import {Popup, XButton, Group, XInput, Alert, Toast, TransferDomDirective as TransferDom, Countdown} from 'vux'
  import Guid from './js/guid'
  import getSource from './js/getSource'
  export default {
    data(){
      return {
        showNotice: true,
        verCode: '',//验证码
        vguid: '',//验证码随机数
        verCodeData: '',//验证码图
        iconType: '',
        registerInfo: {
          phoneNumber: '',
          passWord01: '',
          passWord02: '',
          openId: localStorage.getItem('openId'),
          source: '',
          smsCode: ''
        },
        disabledSend: false,
        countdownTime: 120,
        countdownStart: false,
        alertShow: false,
        alertMessage: '',
        toastText: '',
        showPositionValue: false
      }
    },
    created() {
      this.getverCode();
      this.registerInfo.source = getSource();
    },
    watch: {
      verCode: function () {
        let _self = this;
        let apiurl = global.baseApiUrl + "/base/captcha/verify/" + _self.vguid + '/' + this.verCode;
        this.axios.post(apiurl).then(function (res) {
          if (res.data.succ == true) {
            _self.iconType = 'success'
          } else {
            _self.iconType = 'error'
          }
        })
      }
    },
    methods: {
      goBack(){
        this.$router.push('/')
      },
      //check 电话号码
      checkPhoneNumber(){
        if (!this.$refs.phoneNumber.valid) {
          this.alertShow = true;
          this.alertMessage = '手机号码不正确！';
        }
      },
      //短信发送
      SendSMS() {
        if (this.$refs.phoneNumber.valid && this.iconType == 'success') {
          this.countdownStart = true;
          this.disabledSend = true;
          let _self = this;
          let apiurl = global.baseApiUrl + "/member/reg/sendsms"; //短信接口要不对，
          this.axios({
            method: 'post',
            url: apiurl,
            data: {
              phone: _self.registerInfo.phoneNumber,
              verCodeKey: _self.vguid,
              verCode: _self.verCode
            }
          }).then(function (response) {
            _self.getverCode();
            _self.verCode='';
            _self.iconType='';
            console.info(response.data);
            if (response.data.succ) {
              _self.alertShow = true;
              _self.alertMessage = '短信已发送！';
            } else {
              if (response.data.code == 211012) {
                _self.showMsg("您的帐号已经注册，请直接登录");
              } else if (response.data.code == 211003) {
                _self.showMsg("图片验证码不正确");
              } else {
                _self.showMsg(response.data.msg);
              }
              _self.finish();
            }
          }).catch(function (response) {
          });
        } else {
          this.alertShow = true;
          this.alertMessage = '请正确填写手机号码和验证码！';
        }
      },
      finish (index) {
        this.disabledSend = false;
        this.countdownStart = false;
        this.countdownTime = 120;
      },
      checkPassWord01(){
        //let reg = /^([A-Z]|[a-z]|\d){6}$/g.test(this.registerInfo.passWord01)
        let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/g.test(this.registerInfo.passWord01)
        //([\w\d][^\-_]){10,}
        //^((?=.*[0-9].*)(?=.*[A-Za-z].*)(?=.*_.*))[_0-9A-Za-z]{6,10}$
        //^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$
        if (!reg) {
          this.registerInfo.passWord01 = '';
          this.alertShow = true;
          this.alertMessage = '密码必须是数字和字母的组合，并不少于6位';
          return false;
        }
      },
      checkPassWord02(){
        if (this.registerInfo.passWord02 != this.registerInfo.passWord01) {
          this.registerInfo.passWord02 = '';
          this.alertShow = true;
          this.alertMessage = '密码必须相同';
          return false;
        }
      },
      goRegister(){
        let _self = this;
        this.axios({
          method: 'post',
          url: global.webChatApiUrl + '/user/register/',
          data: {
            accountId: _self.registerInfo.phoneNumber,
            password: _self.registerInfo.passWord01,
            openId: _self.registerInfo.openId,
            source: _self.registerInfo.source,
            smsCode: _self.registerInfo.smsCode
          }
        })
          .then(function (response) {
            var res = response.data;
            var code = res.code;
            if (code == 212001 && res.succ) {
              _self.alertShow = true;
              _self.alertMessage = '注册成功！';
              setTimeout(function () {
                _self.$router.replace({path: '/login'}); //登录成功2s后，则跳转到登录页
              }, 2000)
            } else {
              _self.showMsg(res.msg);
              _self.finish();
            }
          })
          .catch(function (response) {
            console.log(response);
          });
      },
      //获取图片验证码
      getverCode: function () {
        let _self = this;
        _self.vguid = new Guid().newGUID();
        var apiurl = global.baseApiUrl + '/member/vercode/' + _self.vguid;
        console.log('apiurl:' + apiurl);
        this.axios({
          method: 'post',
          url: apiurl
        }).then(function (response) {
          _self.verCodeData = "data:image/png;base64," + response.data.data;
        }).catch(function (response) {
        });
      },
      showMsg (msg) {
        this.showPositionValue = true;
        this.toastText = msg;
      }
    },
    components: {
      Popup,
      XButton,
      Group,
      XInput,
      Alert,
      Countdown,
      Toast
    },
    directives: {
      TransferDom
    }
  }
</script>
<style lang="less" scoped>
  .showNotice-popup {
    width: 100%;
    padding: 20px;

    h3 {
      font-size: 18px;
      padding: 5px;
      border-bottom: 1px solid #D9D9D9;
      margin-bottom: 15px;
    }

    p {
      line-height: 24px;
      margin-bottom: 5px;
    }

  }

  .map {
    padding: 15px;
  }

  .countdownTime {
    position: absolute;
    left: -26px;
    color: #fff;
    font-size: 14px;
    top: 3px;
  }
</style>
